<template>
  <div>
    <el-form label-width="80px" :inline="true" style="margin-top: 20px">
      <el-form-item label="菜单名称">
        <el-autocomplete
          v-model="seachName"
          :fetch-suggestions="querySearchAsync"
          placeholder="菜单名称">
        </el-autocomplete>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="primary" :disabled="searchdisabled" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="addPersimmon" icon="el-icon-plus">新增</el-button>
          <el-button type="primary" @click="exportClick" icon="el-icon-download">导出</el-button>
          <el-popover
            placement="right"
            title="使用说明"
            width="200"
            trigger="hover">
            <div style="margin-left: 10px">
              <ol>
                <li>查询</li>
                <li>排序</li>
              </ol>
            </div>
            <el-button slot="reference" type="success" icon="el-icon-bell"></el-button>
          </el-popover>
        </el-button-group>
      </el-form-item>

    </el-form>

    <div style="width: 100%;position: relative;">
      <el-table
        :data="tableData"
        border
        element-loading-text="正在加载中..."
        v-loading="tableloading"
        style="margin: 0 4px;"
        :height="table_height"
        ref="table"
      >

        <el-table-column
          v-for="(item,index) in tableContent"
          :prop="item.prop  "
          :label="item.label"
          :formatter="item.formatter"
          :key="index"
          :min-width="item.width"
          :fixed="item.fixed"
          :sortable="item.sortable">

        </el-table-column>
        <el-table-column
          prop='remark'
          label='备注'
          width='100'>
          <template slot-scope="scope">
            <el-popover
              width="200"
              trigger="hover"
              :content='scope.row.remark'>
              <el-button slot="reference" :class="{ hasRemark: scope.row.remark }" v-if="scope.row.remark">查看备注</el-button>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="168">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit" size="mini" plain
                         @click="handleClick(scope.row,scope.$index)">编辑
              </el-button>

              <el-button type="danger" icon="el-icon-delete" size="mini" plain
                         @click.native.prevent="deleteRow(scope.$index, scope.row)">删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 8px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>

    </div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.dialogVisible"
      width="35%"
      :show-close=false>
      <dialogPermission :dialog.sync="dialog" :dataServer.sync="tableData" @search="search"></dialogPermission>
    </el-dialog>

  </div>
</template>

<script>
  import Loading from '@/components/loading/loading.vue'
  import dialogPermission from './dialog/dialogPermission.vue'
  import {GetPersimmonName, GetPersimmonPage,DelPermission,GetExcle} from '@/api/sysPersimmon'

  export default {
    components: {'v-loading': Loading, dialogPermission},
    mounted() {

    },
    filters: {},
    computed: {
      hasRemark(remark) {
        if (remark) {
          return true
        } else {
          return false
        }
      }
    },
    data() {
      return {
        seachName: '',
        searchdisabled: false,
        tableloading: false,
        table_height: window.innerHeight * 0.72,
        tableContent: [
          {prop: 'id', label: 'id', width: '80', fixed: true, sortable: true},
          {prop: 'name', label: '权限名称', width: '120', fixed: true},
          {prop: 'pid', label: '父级id', width: '90', sortable: true},
          {prop: 'pname', label: '父级名称', width: '120'},
          {prop: 'type', label: '权限类型', width: '120', formatter: this.formatType},
          {prop: 'path', label: '访问路劲', width: '140'},
          {prop: 'component', label: '组件路劲', width: '150'},
          {prop: 'icon', label: '图标', width: '150'},
          {prop: 'orders', label: '顺序', width: '100', sortable: true},
          {prop: 'status', label: '状态', width: '100', formatter: this.formateState},
          {prop: 'createTime', label: '创建时间', width: '140', sortable: true},
          {prop: 'modifyTime', label: '最后修改时间', width: '180', sortable: true},
          {prop: 'optAccount', label: '维护人', width: '100'}
        ],
        tableData: [],
        page: {
          total: 1,
          current: 0,
          size: 15
        },
        dialog: {
          title: '',
          dialogVisible: false,
          disabledModify: false,
          data: {
            id: '',
            name: '',
            pid: '',
            type: '',
            path: '',
            conmpont: '',
            icon: '',
            orders: '',
            remark:'',
            status:1
          },
          thatDialogData: {},
          thatRow: ""
        },
      }
    },
    methods: {
      querySearchAsync(queryString, callBack) {
        const selectData = []
        GetPersimmonName(queryString).then(response => {
          response.data.forEach(function (obj) {
            selectData.push({'value': obj.name})
          })
        }).then(res => {
          callBack(selectData)
        }).catch(err => {
          this.$message({
            showClose: true,
            message: err,
            type: 'error',
            center: true,
            duration: 0
          })
        })
      },
      search() {
        console.log('查询')
        this.page.current = 1
        this.searchdisabled = true
        this.tableloading = true

        this.getList(this.page, this.seachName)

      },
      getList(page, seachName) {
        GetPersimmonPage(page, seachName).then(res => {
          console.log('res', res.data)
          this.tableData = res.data.records
          this.page.current = res.data.current
          this.page.total = res.data.total
          this.tableloading = false
          this.searchdisabled = false
        })
      },
      addPersimmon() {
        this.dialog.dialogVisible = true
        this.dialog.title='新增'
        if(this.dialog.data.id){
          this.dialog.data={}
        }
      },
      exportClick() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        GetExcle().then(res => {
          loading.close()
          const link = document.createElement('a')
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.setAttribute('download', 'permission.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }).catch(()=>{
          loading.close()
        })

      },
      handleClick(row,index) {
        this.dialog.title='编辑'
        this.dialog.data=row
        this.dialog.dialogVisible=true
        this.dialog.thatDialogData={...row}
      },
      deleteRow(index,row) {
        this.tableloading=true
        this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DelPermission(row.id).then(res=>{
            this.tableData.splice(index,1)
            this.tableloading=false
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        }).catch(() => {
          this.tableloading=false
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      formatType: function (row, column) {

        return row.type === 1 ? '头部导航' : row.type === 2 ? '父级菜单' : row.type === 3 ? '菜单' : '未知'
      },
      formateState: function (row, column) {
        return row.status === 0 ? '禁用' : row.status === 1 ? '可用' : '未知'
      },
      handleSizeChange(val) {
        this.page.size = val
        this.page.current = 1
        this.searchdisabled = true
        this.tableloading = true
        this.getList(this.page, this.seachName)
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.searchdisabled = true
        this.tableloading = true
        this.getList(this.page, this.seachName)
      },
      dialogClose(){
        console.log('触发了关闭的回调')

      }
    }
  }
</script>

<style scoped>
  .hasRemark{
    color: red;
    font: bold!important;
  }
</style>
